// 使用方式
// @import "~@/components/Activiti/ApprovalInfo/styles/var.scss";

/*
  遭遇到性能问题 只要是引入了element-ui的东西，sass编译就会遍历该组件库的内容，导致性能问题。
  该文件直接引入了相关的变量。在node-sass时还好，在dart-sass时就性能很差。
  目前的处理方式时，冗余多写需要引入的变量。不直接使用element-ui的值。
*/
// @import "~@/styles/element-variables.scss";
@import "~@/styles/variables.scss";

// 尝试使用模块化的scss，但是不清楚该怎么写，怎么让vscode能够准确实现识别。
// @use "../../../../styles/element-variables.scss";
// @use "../../../../styles/element-variables.scss";

// 冗余多写 src\styles\element-variables.scss 文件提供的变量。
$--color-primary: #409eff;
$main-color: $--color-primary;

// 标准的间距 默认的间距为20px
$std-gap: 20px;

// 一半的间距
$half-gap: calc($std-gap / 2);

// 侧边栏间距 默认占据25%的宽度。
$aside-width: 25% !default;

// 灰色背景
// $bg-gray: rgba(gray, 0.3);
$bg-gray: $ash-white;

// 纯白背景
$bg-white: white;

// 标准的盒子阴影
// 使用方式
// @include std-box-shadow();
@mixin std-box-shadow() {
  box-shadow: 0 0 5px 2px rgba(131, 145, 169, 0.16);
}

/*
  清除按钮组件默认提供的间距

  设计理由
  按钮组件默认提供的间距影响了布局调整。要求每一个相关的业务组件，自行去清空这些间距。
  自己去增设明确的根标签作用域。

  参数说明
  $rootClassName 相对的根样式名称 填写字符串名
  $targetName 被修改的样式名 这里默认不填写，因为按照样式设计，需要实现针对性的字段处理。故不会考虑开放此参数的填写。

  使用例子
  正例 选取相对较小的范围内选择器
  @include clear-el-button-padding("buttton-box");

  反例 不要选取范围过大的选择器 特别是根标签选择器
  @include clear-el-button-padding("approval-Layout-root");

  参考资料
  https://juejin.cn/post/7116139958699556877#heading-11
*/
@mixin clear-el-button-padding($rootClassName, $targetName: "el-button") {
  .#{$rootClassName} ::v-deep .#{$targetName} {
    // 默认的值为10px
    margin-right: 0;
  }
}
